<template>
  <div class="dt-home">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="banner in banners" :key="banner.id">
          <img :src="banner.imageUrl">
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
import 'swiper/css/swiper.min.css'
import Swiper from 'swiper'
export default {
  name: 'dthome',
  data () {
    return {
      banners: []
    }
  },
  created () {
    this.getBanners()
  },
  methods: {
    getBanners () {
      this.$http.getDataById(1, 0)
        .then(resp => {
          // console.log(resp.banners)
          this.banners = resp.banners
          this.$nextTick()
            .then(() => {
              // eslint-disable-next-line
              new Swiper ('.swiper-container', {
                loop: true,
                autoplay: {
                  delay: 2100,
                  stopOnLastSlide: false,
                  disableOnInteraction: false
                },
                pagination: {
                  el: '.swiper-pagination',
                  clickable: true
                }
              })
            })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.dt-home {
  height: 100%;
  .swiper-wrapper {
    // position: relative;
    .swiper-slide {
      // position: absolute;
      // left: 0;
      // top: 0;
      // 元素的padding-top和padding-bottom的百分比是按当前元素的宽度来计算的
      font-size: 0;
      img {
        width: 100%;
      }
    }
  }
}
</style>
